<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue.js"></script>
    <style>
        .red{
            color:red;
        }
    </style>
</head>
<body>
   <div id="app">
       <!--插值-->
       <h3>{{msg+1}}</h3>
       <h3 v-text="msg+1"></h3>
       <h3>{{val}}</h3>
       <h3 v-html="val"></h3>
       <a :href="href">百度</a>
       <!--绑定class-->
       <h3 :class="objClass">{{msg}}</h3>
       <h3 :class="objClass2">{{msg}}</h3>
       <h3 :class="[red1,red2]">{{msg}}</h3>
       <h3 :class="arrayClass">{{msg}}</h3>
       <!--绑定style-->
       <h3 :style="{color:color,fontSize:fontSize}">{{msg}}</h3>
       <h3 :style="arrayStyle">{{msg}}</h3>
   </div>
</body>
<script>
    //vue的实例化
    var app = new Vue({
         el:"#app",
        data:function () {
            return {
                msg:"<p>hello vue</p>",
                val:"<p>hello vue</p>",
                href:"http://www.baidu.com",
                red:true,
                objClass:{
                    red:false
                },
                objClass2:{
                    red:true
                },
                red1:"red",
                red2:"red2",
                arrayClass:["red3","red4","red5"],
                color:"red",
                fontSize:"20px",
                arrayStyle:{
                    color:"yellow",
                    fontSize:"25px"
                }
            }
        },
        methods:{}
    });
    console.log(app);

</script>
</html>